<script lang="tsx">
import { defineComponent, computed } from 'vue';
import { $t } from '#/locales';
import type { PropType } from 'vue';
import ObsImage from '#/components/obsImage.vue';
import type { CourseInfo } from '#/api/course';

export default defineComponent({
  name: 'RankingCard',
  props: {
    title: { type: String, required: true },
    // 预设类型：hot/new，会自动应用渐变与装饰字
    variant: { type: String as PropType<'hot' | 'new'>, default: undefined },
    // 手动覆盖装饰字与背景（优先级高于 variant 预设）
    markText: { type: String, default: '' },
    gradient: { type: String, default: '' },
    list: { type: Array as PropType<CourseInfo[]>, default: () => [] },
    onItemClick: { type: Function as PropType<(course: CourseInfo) => void>, default: undefined }
  },
  setup(props) {
    const handleClick = (course: CourseInfo) => {
      props.onItemClick && props.onItemClick(course);
    };

    const presetGradient = computed(() => {
      if (props.variant === 'hot') return 'bg-[linear-gradient(to_right,#FFF0E5,#FFFCF8)]';
      if (props.variant === 'new') return 'bg-[linear-gradient(to_right,#E7F7F0FF,#D3FFF500)]';
      return 'bg-white';
    });
    const gradientClass = computed(() => props.gradient || presetGradient.value);

    const presetMark = computed(() => {
      if (props.variant === 'hot') return 'HOT';
      if (props.variant === 'new') return 'NEW';
      return '';
    });
    const mark = computed(() => props.markText || presetMark.value);

    return () => (
      <div class={`relative rounded-[16px] p-[16px] overflow-hidden ${gradientClass.value}`}>
        {mark.value ? (
          <span class="pointer-events-none select-none absolute left-[16px] top-[6px] text-white/50 text-[40px] font-semibold leading-none tracking-widest z-[0]">
            {mark.value}
          </span>
        ) : null}
        <div class="flex items-center mb-4 relative z-[1]">
          <h3 class="text-[18px] leading-[22px] text-[#191919]">{props.title}</h3>
        </div>
        <div class="space-y-3 relative z-[1]">
          {props.list?.map((course) => (
            <div key={course.id} class="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer" onClick={() => handleClick(course)}>
              <div class="flex-1 min-w-0">
                <div class="flex items-center gap-[12px]">
                  <ObsImage src={course.icon} alt={course.name} showPreview={false} imgStyle={{ width: '120px', height: '68px', objectFit: 'contain' }} />
                  <div class="flex-1 min-w-0">
                    <h4 class="text-sm font-medium text-gray-800 truncate">{course.name}</h4>
                    <p class="text-xs text-gray-500 mt-1">{course.studyCount}{$t('course.studyingCount')}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
});
</script>

<style lang="less" scoped>
</style>
